<template>
    <div class="menu-box" :style="{ height:h }">
        <div class="navbar" :class="{ 'active':play }">
            <div class="btn" @click="play = !play">
                <div class="line" :class="{ 'line1-open-an':!play, 'line1-close-an':play }"></div>
                <div class="line" :class="{ 'line2-open-an':!play, 'line2-close-an':play }"></div>
                <div class="title" :class="{ 'title-open-an':!play, 'title-close-an':play }">菜单</div>
            </div>
        </div>
        <ul class="menu">
            <li @click="changeView('/home')" :class="{ 'btn1-open':play , 'btn1-close':!play,'init':!play}">
                <i class="iconfont icon-home"></i>
            </li>
            <li @click="changeView('/types')" :class="{ 'btn2-open':play, 'btn2-close':!play,'init':!play}">
                <i class="iconfont icon-type"></i>
            </li>
            <li @click="changeView('/cart')" :class="{ 'btn3-open':play, 'btn3-close':!play,'init':!play}">
                <i class="iconfont icon-cart"></i>
            </li>
            <li @click="changeView('/about')" :class="{ 'btn4-open':play, 'btn4-close':!play,'init':!play}">
                <i class="iconfont icon-about"></i>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            play: false,
            h:'0px',
            timer:null
        };
    },
    watch:{
        play(value){
            clearTimeout(this.timer);
            if(value){
                this.h = "auto";
            }else{
                this.timer = setTimeout(() => {
                    this.h = "0px";
                }, 1000);
            }
        }
    },
    methods: {
        changeView(path) {
            this.play = false;
            this.$router.push(path);
        }
    }
};
</script>
<style lang="less" scoped>
.menu-box {
    position: absolute;
    bottom: @h+30px;
    right: 30px;
    width: 100px;
    padding-bottom: 100px;
    z-index: 100;
    * {
        color: white;
    }
    .navbar {
        position: absolute;
        bottom: 0px;
        width: 100px;
        height: 100px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        font-size: 0px;
        border-radius: 50%;
        cursor: pointer;
        .btn {
            padding: 25px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            cursor: pointer;
            .line {
                height: 6px;
                background-color: white;
                margin: 0px 2px 6px 2px;
                border-radius: 6px;
            }
            .title {
                font-size: 20px;
            }
            .title-open-an {
                animation: reverseMenu 0.3s forwards;
                @keyframes reverseMenu {
                    0% {
                        transform: translateY(35px);
                    }
                    100% {
                        transform: translateY(0px);
                    }
                }
            }
            .title-close-an {
                transform: translateY(35px);
                opacity: 0;
                animation: activeMenu 0.3s forwards;
                @keyframes activeMenu {
                    0% {
                        transform: translateY(0px);
                        opacity: 1;
                    }
                    100% {
                        transform: translateY(35px);
                        opacity: 0;
                    }
                }
            }
            .line1-open-an {
                animation: reverseTop 0.3s forwards;
                @keyframes reverseTop {
                    0% {
                        transform: translateY(12px) rotate(45deg) scale(1.4, 1);
                    }
                    100% {
                        transform: translateY(0px) rotate(0deg) scale(1, 1);
                    }
                }
            }
            .line1-close-an {
                transform-origin: 12px center;
                animation: activeTop 0.3s forwards;
                @keyframes activeTop {
                    0% {
                        transform: translateY(0px) rotate(0deg) scale(1, 1);
                    }
                    100% {
                        transform: translateY(12px) rotate(45deg) scale(1.4, 1);
                    }
                }
            }
            .line2-open-an {
                animation: reverseMid 0.3s forwards;
                @keyframes reverseMid {
                    0% {
                        transform: translateY(-12px) rotate(-45deg)
                            scale(1.4, 1);
                    }
                    100% {
                        transform: translateY(0px) rotate(0deg) scale(1, 1);
                    }
                }
            }
            .line2-close-an {
                transform: translateY(-12px) rotate(-45deg) scale(1.4, 1);
                transform-origin: 46px center;
                animation: activeMid 0.3s forwards;
                @keyframes activeMid {
                    0% {
                        transform: translateY(0px) rotate(0deg) scale(1, 1);
                    }
                    100% {
                        transform: translateY(-12px) rotate(-45deg)
                            scale(1.4, 1);
                    }
                }
            }
        }
    }
    .active {
        background-color: @pink;
    }
    .menu {
        list-style: none;
        color: white;
        text-align: center;
        width: 100px;
        margin: 0 auto;
        padding: 0px;
        li {
            background-color: rgba(0, 0, 0, 0.6);
            margin-bottom: 20px;
            border-radius: 50%;
            height: 100px;
            line-height: 100px;
            position: relative;
            width: 100px;
            height: 100px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0;
            font-size: 0px;
            i {
                font-size: 50px;
            }
        }
        .init {
            opacity: 1;
        }
    }
    .btn1-open {
        animation: move1 0.8s forwards;
        @keyframes move1 {
            0% {
                transform: translateY(380px);
                opacity: 0;
            }
            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }
    }
    .btn2-open {
        animation: move2 0.6s forwards 0.2s;
        @keyframes move2 {
            0% {
                transform: translateY(260px);
                opacity: 0;
            }
            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }
    }
    .btn3-open {
        animation: move3 0.4s forwards 0.4s;
        @keyframes move3 {
            0% {
                transform: translateY(140px);
                opacity: 0;
            }
            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }
    }
    .btn4-open {
        animation: move4 0.4s forwards 0.6s;
        @keyframes move4 {
            0% {
                transform: translateY(20px);
                opacity: 0;
            }
            100% {
                transform: translateY(0px);
                opacity: 1;
            }
        }
    }
    .btn1-close {
        animation: move5 0.8s forwards;
        @keyframes move5 {
            0% {
                transform: translateY(0px);
                opacity: 1;
            }
            100% {
                transform: translateY(380px);
                opacity: 0;
            }
        }
    }
    .btn2-close {
        animation: move6 0.6s forwards;
        @keyframes move6 {
            0% {
                transform: translateY(0px);
                opacity: 1;
            }
            100% {
                transform: translateY(260px);
                opacity: 0;
            }
        }
    }
    .btn3-close {
        animation: move7 0.4s forwards;
        @keyframes move7 {
            0% {
                transform: translateY(0px);
                opacity: 1;
            }
            100% {
                transform: translateY(140px);
                opacity: 0;
            }
        }
    }
    .btn4-close {
        animation: move8 0.2s forwards;
        @keyframes move8 {
            0% {
                transform: translateY(0px);
                opacity: 1;
            }
            100% {
                transform: translateY(20px);
                opacity: 0;
            }
        }
    }
}
</style>

